<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <title>Simple example - Editor.md examples</title>
    <link rel="stylesheet" th:href="@{/css/style.css}"/>
    <link rel="stylesheet" th:href="@{/css/editormd.css}"/>
    <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="layout">
    <header>
        <h1>Markdown编辑器</h1>
    </header>
    <button style="width: 50px;height: 20px" onclick="upload()">上传</button>
    <div id="editormd">
        <textarea id = "text" style="display:none;" ></textarea>
    </div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/editormd.min.js}"></script>
<script>
    function upload(){
        let content = $("#text").text(); //获取富文本框中的值
        $.ajax({
            url: 'http://localhost:8080/add',
            type: 'post',
            data: {
                content : content
            },
            success:function (data){
                console.log(data);
            }
        })
    }
</script>
<script type="text/javascript">
    var testEditor;
    $(function() {
        testEditor = editormd("editormd", {
            width: "90%",
            height: 640,
            syncScrolling: "single",
            emoji: true,
            imageUpload: true, //同意图片上传
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "/uploadImg",       //图片上传URL 即后台的图片上传接口URL
            path: "/editormd/lib/"
        });
    });
</script>
</body>
</html>